import { Card, Form, Input, Button, Checkbox, message } from "antd";
import logo from "@/assets/logo.png";
import { useNavigate } from "react-router-dom"
import "./index.scss";

import { useStore } from "@/store/index"

export default function Login() {

  const {loginStore } = useStore()
  const navigate = useNavigate()

  async function onFinish (values) {
    console.log(values);
    // values：放置的是所有表单项中用户输入的内容
    const {username, password} = values
    await loginStore.getToken({
      mobile: username,
      code: password
    })
    // 跳转首页
    // navigate("/", {replace: true})
    navigate("/")
    // 提示用户
    message.success("登录成功")
  }
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <div className="login">
      <Card className="login-container">
        <img className="login-logo" src={logo} alt="" />
        {/* 登录表单 */}
        <Form
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
        >
          <Form.Item
            name="username"
            rules={[
              { required: true, message: '请输入手机号!' },
              { pattern: /^1[3-9]\d{9}$/, message: '手机号码格式不对',validateTrigger: 'onBlur'}
            ]}
          >
            <Input size="large" placeholder="请输入手机号" />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[
              { required: true, message: '请输入验证码!' },
              { len: 6, message: '验证码6个字符', validateTrigger: 'onBlur' },
            ]}
          >
            <Input.Password  size="large" placeholder="请输入验证码" />
          </Form.Item>
          <Form.Item name="remember" valuePropName="checked">
            <Checkbox className="login-checkbox-label">
              我已阅读并同意「用户协议」和「隐私条款」
            </Checkbox>
          </Form.Item>

          <Form.Item>
            {/* <!-- 渲染Button组件为submit按钮 --> */}
            <Button type="primary" htmlType="submit" size="large" block>
              登录
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
}
